<ModalDialog @overlayClass="notification-overlay"
  @containerClassNames="{{this.baseInfoEditorClass}}__modal notification-confirm-modal"
  @onClose={{action this.onResetEditor}}>
  <header class="notification-confirm-modal__header {{this.baseInfoEditorClass}}__header">
    <h3 class="{{this.baseInfoEditorClass}}__title">
      Edit Profile
    </h3>
  </header>

  <section class="notification-confirm-modal__content {{this.baseInfoEditorClass}}__content">

    <div class="{{this.baseInfoEditorClass}}__item">
      <p class="{{this.baseInfoEditorClass}}__label">Summary about me</p>
      <Textarea
        class="{{this.baseInfoEditorClass}}__text-input"
        @maxlength={{this.maxCharSummary}}
        @value={{this.focusArea}}
        @placeholder="Share your area of expertise, previous work, or passion"
      />
      <p class="{{this.baseInfoEditorClass}}__text-input-count">{{this.summaryCharCount}}/{{this.maxCharSummary}}</p>
    </div>
    <div class="{{this.baseInfoEditorClass}}__item">
      <p class="{{this.baseInfoEditorClass}}__label">Ask me about (skills or product area)</p>
      <div class="{{this.baseInfoEditorClass}}__tag-input">
        {{#each this.skills as |skill idx|}}
          <NachoPillInput
            class="{{this.baseInfoEditorClass}}__pill"
            @value={{skill}}
            @onDelete={{action this.removeTag "skills" idx}}
          />
        {{/each}}
        <NachoPillInput
          class="{{this.baseInfoEditorClass}}__pill"
          @maxlength={{this.maxCharTagInput}}
          @placeholder="Add skill"
          @onComplete={{action this.addTag "skills"}}
        />
      </div>
    </div>
    <div class="{{this.baseInfoEditorClass}}__item">
      <p class="{{this.baseInfoEditorClass}}__label">Team</p>
      <div class="{{this.baseInfoEditorClass}}__tag-input">
        {{#each this.teamTags as |teamTag idx|}}
          <NachoPillInput
            class="{{this.baseInfoEditorClass}}__pill"
            @value={{teamTag}}
            @onDelete={{action this.removeTag "teamTags" idx}}
          />
        {{/each}}
        <NachoPillInput
          class="{{this.baseInfoEditorClass}}__pill"
          @maxlength={{this.maxCharTagInput}}
          @placeholder="Add team"
          @onComplete={{action this.addTag "teamTags"}}
        />
      </div>
    </div>

  </section>

  <section class="notification-confirm-modal__footer {{this.baseInfoEditorClass}}__actions">
    <button
      class="nacho-button--large nacho-button--secondary {{this.baseInfoEditorClass}}__action"
      {{action this.onResetEditor}}
    >
      Cancel
    </button>
    <button
      class="nacho-button--large nacho-button--inverse {{this.baseInfoEditorClass}}__action"
      {{action this.onSaveEditor}}
    >
      {{#if this.isSaving}}
        <NachoAnimation::PendulumEllipsis />
      {{else}}
        Save
      {{/if}}
    </button>
  </section>
</ModalDialog>

{{yield}}
